<clr-datagrid class="datagrid-compact">
  <clr-dg-column [clrDgSortBy]="shipOrderSorter">排序</clr-dg-column>
  <clr-dg-column [clrDgField]="'name'">飞船名称</clr-dg-column>
  <!-- <clr-dg-column [clrDgSortBy]="shipTypeSorter">Type</clr-dg-column> -->
  <clr-dg-column [clrDgSortBy]="shipQuantitySorter">数量</clr-dg-column>
  <clr-dg-column>等级</clr-dg-column>

  <clr-dg-row *clrDgItems="let ship of fleet; trackBy: getDesignId">
    <clr-dg-cell>{{ ship.order }}</clr-dg-cell>
    <clr-dg-cell>{{ ship.name }}</clr-dg-cell>
    <!-- <clr-dg-cell>{{ ship.type.name }}</clr-dg-cell> -->
    <clr-dg-cell>
      <app-formatted-quantity
        [quantity]="ship.quantity"
        [integer]="true"
      ></app-formatted-quantity>
    </clr-dg-cell>
    <clr-dg-cell>
      <app-formatted-quantity
        *ngIf="ship.modules[0]"
        [quantity]="ship.modules[0].level"
      ></app-formatted-quantity>
    </clr-dg-cell>
    <clr-dg-row-detail *clrIfExpanded>
      <clr-tabs>
        <clr-tab>
          <button clrTabLink id="link1">信息</button>
          <clr-tab-content id="content1" *clrIfActive>
            <app-view [design]="ship" [showDifference]="false"></app-view>
          </clr-tab-content>
        </clr-tab>
        <clr-tab>
          <button clrTabLink id="link1">模块</button>
          <clr-tab-content id="content1" *clrIfActive>
            <table class="table table-compact table-noborder">
              <thead>
                <tr>
                  <th>模块</th>
                  <th>尺寸</th>
                  <th>等级</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let mod of ship.modules">
                  <td>
                    {{ mod?.module?.name }}
                  </td>
                  <td>
                    {{ mod?.size | sizeName }}
                  </td>
                  <td>
                    <app-formatted-quantity
                      [quantity]="mod.level"
                    ></app-formatted-quantity>
                  </td>
                </tr>
              </tbody>
            </table>
          </clr-tab-content>
        </clr-tab>
      </clr-tabs>
    </clr-dg-row-detail>
  </clr-dg-row>

  <!-- <clr-dg-footer>{{users.length}} users</clr-dg-footer> -->
</clr-datagrid>
